<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header-content">
        <div class="header-div">
          <img src="@/assets/images/logo.png" alt="logo" />
          <span class="font-bold"> 达人小工具</span>
          <span class="font-login">
            <el-button type="primary" plain size="large" @click="enterSystem()"><span style="font-size: large;">进入系统</span></el-button>
          </span>
        </div>
      </el-header>

      <el-row class="el-row-style">

        <el-col>
          <div class="first-piece">
            <div class="image-container">
            </div>
            <div class="text-container">
              <div>
                <h3 style="font-family: 'Times New Roman', Times, serif;font-size: xx-large;">抖音商家/团长的达人分销管理工具</h3>
                <h4 style="font-size: x-large;">提升商务效率 降低管理成本</h4>
              </div>
            </div>
          </div>
        </el-col>

        <el-col>
          <div class="second-piece">
            <span class="title-font">裂变分销数据化一站追踪管理工具，构筑自有私域带货达人护城河</span>
            <el-row justify="space-evenly">
              <el-col :span="5">
                <div class="grid-content ep-bg-purple">
                  <el-card shadow="always" class="card-bg">
                    <svg t="1701852371909" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="28272" width="2rem" height="1rem">
                      <path
                        d="M960 128H64c-35.3 0-64 28.6-64 64v640c0 35.3 28.7 64 64 64h160c8.8 0 16-7.2 16-16v-12c0-2.2 1.8-4 4-4h151c2.2 0 4 1.8 4 4v12c0 8.8 7.2 16 16 16h193c8.8 0 16-7.2 16-16v-12c0-2.2 1.8-4 4-4h152c2.2 0 4 1.8 4 4v12c0 8.8 7.2 16 16 16h160c35.3 0 64-28.7 64-64V192c0-35.4-28.7-64-64-64zM576 680v-48c0-4.4 3.6-8 8-8h304c4.4 0 8 3.6 8 8v48c0 4.4-3.6 8-8 8H584c-4.4 0-8-3.6-8-8z m0-128v-48c0-4.4 3.6-8 8-8h304c4.4 0 8 3.6 8 8v48c0 4.4-3.6 8-8 8H584c-4.4 0-8-3.6-8-8z m320-128c0 4.4-3.6 8-8 8H584c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h304c4.4 0 8 3.6 8 8v48zM447.2 736h-288c-8.8 0-16.8-3.6-22.6-9.4-5.8-5.8-9.4-13.8-9.4-22.6 0-57.1 27.2-107.8 69.3-140 4-3.1 4.3-9 0.5-12.3-33-29.3-53.8-72.1-53.8-119.7 0-87.7 70.5-158.9 157.9-160 87.8-1.1 160.7 69.6 162 157.4 0.8 48.6-20.1 92.4-53.7 122.2-3.8 3.4-3.6 9.3 0.5 12.4 21.1 16.1 38.4 36.8 50.4 60.6 12.1 23.8 18.9 50.8 18.9 79.3 0 17.8-14.3 32.1-32 32.1z"
                        p-id="28273"></path>
                    </svg>
                    <div>
                      <span>专属达人</span>
                      <span>渠道专属码关联绑定精准达人</span>
                    </div>
                  </el-card>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="grid-content ep-bg-purple-light">
                  <el-card shadow="always" class="card-bg">
                    <svg t="1701847303448" class="icon" viewBox="0 0 1027 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="10091" width="2rem" height="1rem">
                      <path
                        d="M514.045954 1024C231.704296 1024 2.045954 794.341658 2.045954 512S231.704296 0 514.045954 0s512 229.658342 512 512-229.658342 512-512 512z m0-967.224775c-251.140859 0-455.224775 204.083916-455.224775 455.224775s204.083916 455.224775 455.224775 455.224775 455.224775-204.083916 455.224775-455.224775-204.083916-455.224775-455.224775-455.224775z"
                        fill="#020202" p-id="10092"></path>
                      <path
                        d="M831.168831 444.995005c25.062937 0 46.033966 20.45954 46.033966 46.033966v219.94006c0 25.062937-20.45954 46.033966-46.033966 46.033966-25.062937 0-46.033966-20.45954-46.033966-46.033966V491.028971c0-25.574426 20.45954-46.033966 46.033966-46.033966z m-125.826174 155.492507c25.062937 0 46.033966 20.45954 46.033966 46.033967v63.936063c0 25.062937-20.45954 46.033966-46.033966 46.033966-25.062937 0-46.033966-20.45954-46.033966-46.033966v-63.936063c0.511489-25.574426 20.971029-46.033966 46.033966-46.033967z m-125.314685-63.936063c25.062937 0 46.033966 20.45954 46.033966 46.033966V710.969031c0 25.062937-20.45954 46.033966-46.033966 46.033966-25.062937 0-46.033966-20.45954-46.033966-46.033966v-128.383616c0-25.574426 20.45954-46.033966 46.033966-46.033966z"
                        fill="" p-id="10093"></path>
                      <path
                        d="M477.73027 670.561439h-39.384616c-7.160839-46.545455-47.568432-82.861139-96.15984-82.861139s-88.999001 35.804196-96.15984 82.861139h-43.988012v-132.987013h226.077922c8.183816 0 14.321678-6.649351 14.321678-14.321679V249.094905h271.088912c8.183816 0 14.321678-6.649351 14.321678-14.321678 0-8.183816-6.649351-14.321678-14.321678-14.321679H428.627373c-8.183816 0-14.321678 6.649351-14.321679 14.321679v64.959041H329.91009c-4.603397 0-9.206793 2.557443-11.764236 6.137862l-141.682318 206.641359c-1.534466 2.557443-2.557443 5.114885-2.557442 8.183816v164.187812c0 8.183816 6.649351 14.321678 14.321678 14.321678h58.309691c7.160839 47.056943 47.568432 82.861139 96.15984 82.861139s88.999001-35.804196 96.15984-82.861139h38.873127v-28.643356zM337.582418 328.375624h76.723276v180.555445H213.802198L337.582418 328.375624z m5.114885 425.046953c-37.85015 0-68.539461-30.689311-68.539461-68.53946s30.689311-68.539461 68.539461-68.539461 68.539461 30.689311 68.53946 68.539461-30.689311 68.539461-68.53946 68.53946z"
                        fill="" p-id="10094"></path>
                      <path
                        d="M505.350649 335.536464H767.232767c7.672328 0 14.321678-6.649351 14.321679-14.321679 0-8.183816-6.649351-14.321678-14.321679-14.321678H505.350649c-8.183816 0-14.321678 6.649351-14.321678 14.321678s6.649351 14.321678 14.321678 14.321679z"
                        fill="" p-id="10095"></path>
                    </svg>
                    <div>
                      <span>交付监控</span>
                      <span>自动追踪达人交付和出单情况</span>
                    </div>
                  </el-card>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="grid-content ep-bg-purple">
                  <el-card shadow="always" class="card-bg">
                    <svg t="1701847403467" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="11116" width="2rem" height="1rem">
                      <path
                        d="M834.389333 0H189.525333C108.458667 0 42.666667 73.130667 42.666667 160.938667v702.122666C42.666667 952.064 108.544 1024 189.525333 1024h644.864c81.066667 0 146.944-73.130667 146.944-160.938667V160.938667C981.333333 73.130667 915.456 0 834.389333 0zM232.277333 149.930667l60.672 96.682666 21.930667 34.730667h1.877333l82.261334-131.669333h58.197333l-89.6 139.946666h60.416v29.269334h-84.224v50.602666h75.093333v29.269334h-75.093333v73.130666h-54.698667v-73.130666h-74.325333V369.493333h75.093333v-50.773333H204.8v-29.184h60.416l-89.6-139.605333h56.576zM840.533333 870.4h-657.066666v-43.861333h657.066666v43.861333z m0-134.570667h-657.066666v-43.861333h657.066666v43.861333z m0-134.570666h-657.066666V557.226667h657.066666v43.946666z m0-134.570667H605.866667v-43.946667h234.666666v43.946667z m0-134.656H605.866667v-43.861333h234.666666v43.861333z m0-134.570667H605.866667V153.6h234.666666v43.861333z"
                        fill="#5E5E5E" p-id="11117"></path>
                    </svg>
                    <div>
                      <span>业绩核算</span>
                      <span>无纸化一目了然管理员工绩效</span>
                    </div>
                  </el-card>

                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>

        <el-col>
          <div class="third-piece">
            <span class="title-font">好的带货管理系统将成为您的生意增长新引擎</span>
            <div>
              <div class="image-container">
                <img class="base-image" src="@/assets/images/3.png" alt="" />
                <img class="overlay-image" src="@/assets/images/4.png" alt="" />
              </div>
              <div class="text-container">
                <p><el-icon :size="30">
                    <Collection />
                  </el-icon> 精细管理带货达人</p>
                <p>人人都是你的带货员</p>
              </div>
            </div>
          </div>
        </el-col>
        <el-col>
          <div class="fourth-piece">
            <div class="fourth-padding">
              <div class="image-container">
                <img class="base-image" src="@/assets/images/bg4-data.png" alt="" />
              </div>
              <div class="text-container">
                <p style="padding-top: 15%;"><el-icon :size="30">
                    <ShoppingCart />
                  </el-icon> 高效对接带货</p>
                <p> 对接能效大幅提升，优质达人主动找上门 </p>
              </div>
            </div>
          </div>
        </el-col>

        <el-col>
          <div class="fifth-piece">
            <div>
              <div class="text-container">
                <p><el-icon :size="30">
                    <Expand />
                  </el-icon> 数据分析</p>
                <p> 可视数据化提效带货管理，让你更懂你的达人 </p>
              </div>
              <div class="image-container">
                <img class="base-image" src="@/assets/images/3.png" alt="" />
                <img class="overlay-image" src="@/assets/images/4.png" alt="" />
              </div>
            </div>
          </div>
        </el-col>

        <el-col>
          <div class="six-piece">

            <div>

              <div class="image-container">
                <img class="base-image" src="@/assets/images/3.png" alt="" />

              </div>
              <div class="text-container">
                <p><el-icon :size="30">
                    <Position />
                  </el-icon> 抖客快速裂变分享</p>
                <p> 对接能效大幅提升，根植社交营销主战场-微信 </p>
              </div>
            </div>
          </div>
        </el-col>

        <el-col>
          <div class="seven-piece">

            <div>
              <div class="image-container">
                <img class="base-image" src="@/assets/images/3.png" alt="" />
              </div>
              <div class="text-container">
                <p> 全链路、一体化达人对接管理解决方案，达人带货管理更简单</p>
              </div>
            </div>
          </div>
        </el-col>

        <el-col>
          <div class="eight-piece">
            <span class="title-font">马上试用达人小工具 见证订单全新增长</span>
          </div>
        </el-col>

      </el-row>


    </el-container>
  </div>
</template>

<script setup lang="ts" >
import { Collection, ShoppingCart, Expand, Position } from '@element-plus/icons-vue'
import { useRouter } from "vue-router";
const router = useRouter();
const enterSystem = () => {
  console.log("进入系统");
  router.push("/home/user");
}

</script>

<style scoped lang="scss" >@import "./index.scss";</style>
